<template>
    <div>
        <h1>Vue中的事件委托（事件代理）</h1>
        <ul @click="handleClick">
            <li v-for="(value,index) in list" :key="index" :data-index="index">{{value.text}}</li>
        </ul>
        <h2>{{msg}}</h2>
    </div>  
</template>

<script>

export default{
    data() {
        return {
            list:[
                {"id":0,"text":"儿子事件0"},
                {"id":1,"text":"儿子事件1"},
                {"id":2,"text":"儿子事件2"},
                {"id":3,"text":"儿子事件3"}
            ],
            msg:"事件委托也叫事件代理，在JavaScript中的定义是将同一类的行为交由一个事件处理，如：页面增删改查，不用对每一个功能做监听，在他的父元素监听即可，在原始的javascript中由冒泡机制实现，而在vue中通过对子元素添加标记，：data-index='index'，对父元素增加监听事件（handelclick），判断e.target.nodeNmae.toLowerCase()是否等于子元素li，最后在e.target.dataset.index获取索引进行操作即可 "
        }
    },
    methods:{
        handleClick(e){
            if(e.target.nodeName.toLowerCase() === 'li'){
                let index=parseInt(e.target.dataset.index);
                this.doSomething(index);
            }
        },
        doSomething(index){
            //进行对应结点的处理
            console.log(index);
        }
    }
}
</script>